<!doctype html>
<html>

<head>
    <meta charset="utf-8">
    <title>XXX数据中心 - XXXAPP月活跃数 - [2018-06 ~ 2019-05] </title>
    <script src="https://www.chartjs.org/dist/2.8.0/Chart.min.js"></script>
    <script src="https://www.chartjs.org/samples/latest/utils.js"></script>
    <style>
    canvas{
        -moz-user-select: none;
        -webkit-user-select: none;
        -ms-user-select: none;
    }
    </style>

</head>

<body>
    <p style="line-height:50px">&nbsp;</p>
    <div style="width:1000px;margin:auto;">
        <canvas id="canvas"></canvas>
    </div>
    <p style="line-height:50px">&nbsp;</p>
    <script>
        var MONTHS = ['January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December'];
        var config = {
            type: 'line',
            data: {
                labels: ['2018-06', '2018-07', '2018-08', '2018-09', '2018-10', '2018-11', '2018-12', '2019-01', '2019-02', '2019-03', '2019-04', '2019-05'],
                datasets: [{
                    label: '月活跃数(万)',
                    backgroundColor: window.chartColors.blue,
                    borderColor: window.chartColors.blue,
                    data: [ // 75 - 85
                        78.30, 80.62, 81.44, 83.94, 84.72, 80.56, 81.55, 79.65, 75.01, 77.85, 79.13, 79.53, 
                    ],
                    fill: false,
                }/*, {
                    label: 'My Second dataset',
                    fill: false,
                    backgroundColor: window.chartColors.red,
                    borderColor: window.chartColors.red,
                    data: [
                        randomScalingFactor(), randomScalingFactor()
                    ],
                }*/]
            },
            options: {
                elements: {
                    line: {
                        tension: 0 // disables bezier curves
                    }
                },
                legend: {
                    labels: {
                        fontColor: 'black'
                    }
                },
                responsive: true,
                title: {
                    display: true,
                    text: '2018-06 ~ 2019-05 XXXAPP月活跃数'
                },
                tooltips: {
                    mode: 'index',
                    intersect: false,
                },
                hover: {
                    mode: 'nearest',
                    intersect: true
                },
                scales: {
                    xAxes: [{
                        display: true,
                        scaleLabel: {
                            display: true,
                            labelString: '统计月份(12月)'
                        }
                    }],
                    yAxes: [{
                        display: true,
                        scaleLabel: {
                            display: true,
                            labelString: '(万)活跃数'
                        }
                    }]
                }
            }
        };

        window.onload = function() {
            var ctx = document.getElementById('canvas').getContext('2d');
            window.myLine = new Chart(ctx, config);
        };

    </script>
</body>

</html>
